<template>
  <el-dialog
    title="查看题目详情"  
    v-model="state.visible"
    width="900px"
    >  
    <template v-for="item in state.questionList" :key="item.content">
      <el-card class="box-card">
          <template #header>
              <div class="card-header">
                <div class="question-knowledge">
                  <span>知识点：
                    <template v-for="(item_knowledge,index) in item.knowledgepoint" :key="index">
                      {{ item_knowledge.name }};
                    </template>                      
                  </span>
                </div>
                  <span>题型：{{item.type_cn}}</span>                  
                  <el-row>
                    难度                 
                    <el-rate v-model="item.difficulty_level" disabled/>
                  </el-row>
                  <span>发布日期：{{ item.publish_time  }}</span>
                  <span>来源：{{ item.reference }}</span>                
              </div>
            </template>
            <div class="card-body"> 
              <p>【题{{ item.order }}】</p>
                <div v-html="item.content" class="line-break"></div>
                <!-- <el-image v-for="url in item.images" :key="url" :src="url" style="width: 150px;" />   -->
                <p>【答案】</p>
                <div v-html="item.answer" class="line-break"></div>
                <!-- <el-image v-for="url in item.images_answer" :key="url" :src="url" style="width: 150px;" /> -->
                <p>【解析】</p>
                <div v-html="item.explain" class="line-break"></div>
                <!-- <el-image v-for="url in item.images_explain" :key="url" :src="url" style="width: 150px;" />   -->
            </div>
      </el-card>
      <el-divider />   
    </template>
    <div class="buttonClass">
      <el-button type="primary" @click="closeDialogClick">关闭</el-button>
    </div>
  </el-dialog>
</template>

<script setup>
  import { deepClone } from '@/utils'
  import { reactive, ref, onMounted, toRefs } from 'vue'
  const props = defineProps({    
    questionList: Array,
  })
  let state=reactive({
    visible: false,
    questionList: Array,
  })
  // onMounted(()=>{
  //   state.questionList = toRefs(props.questionList)
  // console.log('仅显示题目列表：',state.questionList)
  // })
  
  // 显示弹窗, 并且进行深拷贝
  const open = (paperquestionList) => {
    // console.log("传过来的题目列表：", paperquestionList)
    
    if(paperquestionList.length>0){
      console.log("子组件收到父组件的题目列表:",paperquestionList)
      state.questionList = deepClone(paperquestionList)
    }
    state.visible = true
  }
  // 关闭弹窗
  const close = () => {
    state.questionList=[]
    state.visible = false
  }
  const closeDialogClick=()=>{
    state.visible = false
  }
  //截取时间中的日期
  const onlyDate = (datestr)=>{    
    if(datestr !==""){
      if(datestr.length>10){
        return datestr.slice(0,10)
      } 
    }
    return datestr
    
  }
  defineExpose({ open, close })

</script>

<style scoped>
.showQuestion{
    margin: 0;
  }
  .header {
    display: block;
    margin: 5;
  }
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 10px;
    margin: 0;
    padding: 0;
    height: 10px;
  }
  .card-body {
      display: block;
      margin: 0px;
      padding: 0px;
  }
  .text {
    font-size: 10px;
  }
  .item {
    margin-bottom: 18px;
  }
  .box-card {
    height:auto;
    overflow-y: auto;
  }
  .line-break{
  white-space: pre-wrap;
  }
  img{
      display:block;
  }
  .buttonClass{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
</style>